// 登录界面
<template>
  <div class="login">
    <!-- 左边 -->
     <div class="left">
      <img src="@/assets/img/logo.svg" >
      <div class="title-box">
          <p>致力于电梯</p>
          <p>安全的维修专家</p>
      </div>
      <div class="buttom">
        <div @click="addClick(0)" :class="[0 === nodeId ? 'change' : '']">登录</div>
        <div @click="addClick(1)" :class="[1 === nodeId ? 'change' : '']">注册</div>
      </div>
      
     </div>
      <!-- 右边 -->
     <div class="right">
          <!-- 登录页面 -->
          <div class="login" v-show="0 === nodeId">
             
            <div class="title">
               <h1>您好,</h1>
           <h4>欢迎登录鸿浩电梯</h4>
            </div>
           
           <!-- 登录表单 -->
          <div class="form">
 
          </div>

          </div>
          
          <!-- 注册页面 -->
          <div class="regist"  v-show="1 === nodeId">
           注册页面
          </div>

     </div>
  </div>
</template>
<script>
  export default {
    name:'Login',
    data() {
     return {
      nodeId:0
     }
    },
    methods:{
     // 点击切换登录注册
    async addClick(index){
         this.nodeId = index
         const req = await this.$http.getList()
         console.log('req',req)
     }
    }

  }
</script>
<style lang='scss' scoped>
.login{
 display: flex;
 height: 100%;
 .left{
  width: 33.4%;
  // border: 1px solid springgreen;
  height: 100%;
  background: url('~@/assets/login-img/login/back_bg@2x.png') no-repeat center;
  background-size: 100%;
  position: relative;
  img{
   margin-top: 4.4%;
   margin-left: 3.5%;
  }
  .title-box{
   font-size: 16px;
   color: #ffffff;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%,-50%);
   height: 30%;
   width: 10%;
   display: flex;
   text-align: center;
   p{
    &:last-child{
     padding-top: 100%;
    }
   }
  }
  .buttom{
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   right: 0;
   width: 13%;
   // border: 1px solid red;
   height: 15%;
  > div{
   position: relative;
   font-weight: 600;
    display: flex;
    justify-content: center;
    align-items: center;
     margin-bottom: 10px;
     height: 40%;
     font-size: 14px;
     text-align: center;
     border-radius: 50% 0 0 50%;
     color: #ffffff;
     cursor: pointer;
     &.change{
      color: #4F7BD9;
      background-color:#ffffff ;
      &::after{
       content: '';
       position: absolute;
       right: -10px;
       top: -4px;
       height: 40%;
       width: 30%;
       transform: rotateZ(60deg);
       background-color: #ffffff;
      }
     }
   }
  }
 }
 .right{
  flex: 1;
  // border: 1px solid darkblue;
  height: 100%;
  .login{
    height: 100%;
    .title{
      display: flex;
      flex-direction: column;
      align-items: center;
    }
  }
 }

}
</style>